<template>
  <div class="ganttChartClass">
    <!-- 顶部标题 -->
    <div class="topTitle">
      <div style="position: relative" :style="{ width: leftTitleWidth + 'px' }">
        <div style="font-size: 12px; margin-left: 58px; margin-top: -10px">
          年份
        </div>
        <div class="diagonalLine"></div>
        <div style="font-size: 12px; margin-left: -54px; margin-top: -30px">
          项目
        </div>
      </div>

      <div
        v-for="(item, i) in props.data.title"
        :key="i"
        :style="{
          width:
            'calc(' +
            '( 100% - ' +
            leftTitleWidth +
            'px)' +
            ' * (1 / ' +
            props.data.title.length +
            ')' +
            ')',
        }"
      >
        {{ item }}年
      </div>
    </div>

    <div v-for="(item, i) in props.data.data" :key="i" class="content">
      <!-- 左侧标题 -->
      <div :style="{ width: leftTitleWidth + 'px' }" class="leftTitle">
        <!-- 只有一级题目 -->
        <div
          style="display: flex; width: 100%; height: 100%; text-align: center"
        >
          <!-- 一级题目 -->
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 16px;
            "
            :style="{
              width: item.children[0].subTitle === '' ? '100%' : '40%',
              paddingRight: item.children[0].subTitle === '' ? '10px' : '0px',
            }"
            class="firstTitleArea"
          >
            <div style="display: inline-block; text-align: left">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
      <div
        :style="{
          width:
            'calc(' +
            '( 100% - ' +
            leftTitleWidth +
            'px)' +
            ' * (1 / ' +
            props.data.title.length +
            ')' +
            ')',
        }"
      >
        <!-- {{item}} -->
        <!-- <div style="height:100%;width:20px;background:red;position: relative;z-index:20;">
              </div> -->
        <div
          v-for="(item2, i2) in item.children"
          :key="i2"
          style="width: 100%; display: flex; justify-content: flex-start"
        >
          <!-- 二级标题展示 -->
          <div style="width: 0px">
            <div
              style="
                width: 84px;
                height: 100%;
                position: relative;
                left: -84px;
                align-items: center;
                justify-content: center;
                padding: 0 5px;
                color: #585d79;
                font-size: 14px;
                font-weight: 600;
              "
              :style="{
                borderTop: 0 === i2 ? 'none' : '1px solid #FFE1C5',
                display: item2.subTitle === '' ? 'none' : 'flex',
              }"
            >
              {{ item2.subTitle }}
            </div>
          </div>

          <div style="width: 100%">
            <div
              v-for="(item3, i3) in item2.children"
              :key="i3"
              class="lineRow"
              style="display: flex; width: 100%"
            >
              <div
                v-for="(ele2, index2) in item3"
                :key="index2"
                style="width: 100%; flex-shrink: 0"
              >
                <!-- 这行是占位 -->
                <div
                  :style="{
                    width: 'calc(' + ele2.width + ' - 1px)',
                    background: lineDrawArr[index2 % 4],
                  }"
                  style="height: 100%; position: relative; visibility: hidden"
                  class="lineDraw"
                >
                  {{ ele2.name }}
                </div>

                <!-- 这行才是真正显示 -->
                <div
                  :style="{
                    width: 'calc(' + ele2.width + ' - 1px)',
                    left: ele2.left,
                    background: lineDrawArr[index2 % 4],
                  }"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                  class="lineDraw"
                >
                  <div style="text-align: left; display: inline-block">
                    {{ ele2.name }}
                  </div>
                </div>
              </div>

              <div></div>
            </div>
          </div>

          <div></div>
        </div>
        <div></div>
      </div>
      <div
        v-for="item5 in props.data.title.length - 1"
        :style="{
          width:
            'calc(' +
            '( 100% - ' +
            leftTitleWidth +
            'px)' +
            ' * (1 / ' +
            props.data.title.length +
            ')' +
            ')',
        }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let props = defineProps<{ data: any }>()

let leftTitleWidth = ref(150)

let lineDrawArr = ['#E4EFFF', '#F3F37E', '#FFDED7', '#CBEEEA']
</script>

<style lang="less" scoped>
@bg: #fef9f3;
@borderColor: #ffe1c5;

.ganttChartClass {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid @borderColor;
  border-right: 0px;

  .content {
    display: flex;
    flex-wrap: wrap;

    border-top: 1px dashed @borderColor;

    &:nth-child(2) {
      border-top: 1px solid @borderColor;
    }

    .leftTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      padding: 10px;
      padding-right: 0px;
      background: @bg;
      color: #252631;

      .firstTitleArea {
        position: relative;

        &:after {
          display: block;
          content: '';
          height: calc(100% + 20px);
          width: 1px;
          background: @borderColor;
          position: absolute;
          right: 0;
        }
      }
    }

    & > div {
      position: relative;

      // border-right: 1px solid blue;
      &::after {
        display: block;
        content: '';
        position: absolute;
        height: 100%;
        width: 1px;
        background: @borderColor;
        right: 0;
        top: 0;
      }

      .lineRow {
        // height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
        position: relative;

        .lineDraw {
          text-align: center;
          // line-height: 30px;
          z-index: 5;
          position: absolute;
          padding: 5px 20px;
          top: 0;
          height: 100%;

          .lineDrawText {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            color: #585d79;
            font-size: 14px;

            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .topTitle {
    display: flex;
    flex-wrap: wrap;
    background: @bg;
    color: #ce8d51;

    & > div {
      display: inline-block;
      text-align: center;
      border-right: 1px solid @borderColor;
      height: 50px;
      line-height: 50px;
      overflow: hidden;

      .diagonalLine {
        width: 200px;
        border-bottom: 1px solid @borderColor;
        transform: rotate(17.9deg);
        transform-origin: 0 0;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
      }
    }
  }

  div {
    box-sizing: border-box;
  }
}
</style>
